<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<style>
*{
  padding:0;
  margin:0;
}
li{
  list-style: none;
  float: left;
  width: 200px;
  height: 150px;
  background: purple;
  color: white;
  line-height: 150px;
  text-align: center;
  font-size: 30px;
  margin: 20px;
}
</style>
<ul>
  <li>神兵小将</li>
  <li>C60-勇哥</li>
  <li>一号幸福小海豚</li>
  <li>我是邹智</li>
  <li>Katherine蓝羽</li>
  <li>PHP是世界上最好的语言</li>
</ul>


  <script>

  // var lis = document.getElementsByTagName('li');
  // for(var i =0;i<lis.length;i++){
  //   (function(x){
  //     // 给i号li加单击事件
  //     lis[x].onclick = function(){
  //       alert(x);
  //     }
  //   })(i)
  // }



  var lis = document.getElementsByTagName('li');
  for(var i =0;i<lis.length;i++){
    let x = i;
    lis[x].onclick = function(){
      alert(x);
    }
  }




  </script>


</body>
</html>
